<template>
    <div class="course">
      <div class="course-type">
          <el-card class="box-card" :body-style="{padding :'20px 20px 15px 20px'}">
            <el-row :gutter="5">
              <el-col :span="3"><span class="direc">产品分类</span></el-col>
              <el-col :span="18">
                <div class="course-type-list">
                  <span class="type" :class="{'active':productType==null }" @click="chooseType()">全部</span>
                  <span v-for="(productTypeItem,index) in productTypeOptions" :key="index" class="type" :class="{'active':productType==productTypeItem.productTypeId}" @click="chooseType(productTypeItem.productTypeId)">{{productTypeItem.productTypeName}}</span>
                </div>
              </el-col>
            </el-row>
          </el-card>
      </div>
      <div class="course-container" v-loading="loading">
          <el-row :gutter="15">
            <el-col :span="8" v-for="(product, index) in productList" :key="index">
              <product-card :product="product" :key="index"></product-card>
            </el-col>
          </el-row>
          <div class="noCourse" v-if="productList.length<=0">暂无产品</div>
          <div class="more-course" id="more-course">
              <pagination
                background
                layout="prev, pager, next"
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
          </div>
      </div>
    </div>
</template>
<script>
import store from '@/store'
import router from '@/router'
import { mapState } from 'vuex'
import logoImg from '@/assets/logo/logo.png'
import { mapGetters } from 'vuex'
import { listProduct, listProductType } from "@/api/face/product";
import ProductCard from '@/views/components/ProductCard';

export default {
  name: 'Index',
  components: {
    ProductCard,
  },
  data() {
    return {
      //背景色动态
      backgroundColor: "#3c6bb1",
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 产品数据
      productList: [],
      //课程类型
      productTypeOptions:[],
      productType: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9,
        productType: null,
      },
      baseApi: process.env.VUE_APP_BASE_API, // 服务器地址
    }
  },
  
  created() {
    this.getList();
    this.getProductTypeList();
  },
  methods: {
      /** 查询课程列表 */
    getList() {
      this.loading = true;
      
      listProduct(this.queryParams).then(response => {
        this.productList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //查询所有产品分类
    getProductTypeList() {
      listProductType().then(response => {
        this.productTypeOptions = response.data;
      });
    },
     chooseType(productType) {
       this.productType = productType;
       this.queryParams.productType = productType;
       this.getList();
    },
  },
  computed: {
  },
  watch: {
  },
  mounted() {

  },
}
</script>
<style lang="scss" scoped>

    .course{
        padding-top: 60px;
        padding: 80px 15px 10px 15px;
        max-width: 1200px;
        width: 100%;
        margin: auto;
        .course-type{
          .direc{
            color: #fff;
            font-size: 16px;
            display: inline-block;
            padding: 0px 20px;
          }
          .course-type-list{
            .active{
              color: #fff !important;
              background: #408cff !important;
            }
            .type{
              cursor: pointer;
              font-size: 12px;
              display: inline-block;
              border-radius: 2px;
              background: #e6f5ff;
              color: #408CFF;
              padding: 5px 20px;
              margin-right: 5px;
              margin-bottom: 5px;
              text-align: center;
            }
          }
          

        }
        .course-container{
           max-width: 1200px;
           width: 100%;
           padding: 20px 0;
           margin: auto;
           .noCourse{
             min-height: 300px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 14px;
             color: #5e6d82;
           }
           p{
             text-align: left;
             font-size: 20px;
             font-weight: 600;
             color: #333;
           }
           .more-course{
             padding: 30px 0;
             text-align: center;
           }
        }
        
    }
    #more-course ::v-deep .pagination-container{
            height: auto !important;
            background-color: #262c32;
            div {
                position: relative !important;
            }
           }
    .course-type ::v-deep .el-card  {
        background-color: #262c32;
        border: 1px solid #262c32;
    } 
</style>